<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>基本列表2</title>
</head>
<script type="text/javascript" src="../vue.js"></script>

<!--
      面试题：react。vue中的key有什么作用？（key的内部原理）
        1.虚拟dom中key的作用：
          key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
          随后Vue进行【新虚拟DOM】与【旧虚拟Dom】的差异比较，比较规则如下：

        2.对比规则：
          a.旧虚拟Dom中找到了与新虚拟Don相同的key
              ①.若虚拟DOM中的内容没变，直接使用之前的真实Dom
              ②.若虚拟Dom中的内容变了，则生成新的虚拟DOm，随后替换掉页面中之前的真实DOm
          b.旧虚拟DOM中未找到与新虚拟Dom相同的key
              创建新的真实Dom，随后渲染到页面

        3.用index作为key可能会引发的问题
               1.若对数据进行：逆序添加。逆序删除等破坏顺序的操作：
                        会产生没有必要的真实DOm更新 ==》 界面效果没问题，但效率低

               2.如果结构中还包含输入类的DOm
                    会产生错误的DOm更新 ==》 界面出现问题

        4.开发中如何选择key？：
            1.最好使用每条数据的唯一表识作为key。比如id，手机号，身份证号，学号等唯一值
            2.如果不存在对数据的逆序添加。逆序删除等破坏顺序的操作，仅用于渲染列表用于展示
                  使用index作为key没有问题
-->

<body>

<div id="root">
<!--  遍历数组-->
  <h2>人员列表(遍历数组)</h2>
  <button @click.once="add">添加一个老六</button>
  <ul>姓名-年龄
    <li v-for="(person,index) of persons" :key="person.id">{{person.name}}-{{person.age}}
      <input type="text">
    </li>
  </ul>

</div>


</body>

<script type="text/javascript">

  Vue.config.productionTip = false

  new Vue({
    el:'#root',
    data:{
      persons:[
        {id:'001',name:'张三',age:18},
        {id:'002',name:'李四',age:14},
        {id:'003',name:'王五',age:13},
        {id:'004',name:'麻子',age:15},
      ],
    },
    methods:{
      add(){
        const person ={id:'005',name:'老六',age:400}
        this.persons.push(person)
      }
    }
  })
</script>
</html>